<template>
	<div class="login-box">
		<Header />
		<div class="main">
			<div class="title">
				<h1>修改密码</h1>
			</div>
			<div class="form-box">
				<el-form
					label-position="top"
					label-width="auto"
					:rules="rules"
					:model="formInfo"
					ref="formInfoRef"
				>
					<el-form-item label="原密码" prop="account">
						<el-input
							type="email"
							v-model="formInfo.account"
							placeholder="请输入原密码"
						/>
					</el-form-item>
					<el-form-item label="新密码" prop="password">
						<el-input
							type="password"
							v-model="formInfo.password"
							placeholder="8-16位英数混合，允许特殊符号，区分大小写"
						/>
					</el-form-item>
					<el-form-item label="再次确认密码" prop="password">
						<el-input
							type="password"
							v-model="formInfo.password"
							placeholder="请再次确认密码"
						/>
					</el-form-item>
					<el-form-item label="输入验证码" prop="password">
						<daojishi></daojishi>
					</el-form-item>
				</el-form>
			</div>
			<div class="btn">
				<el-button type="danger" round @click="submitForm(formInfoRef)"
					>确认修改</el-button
				>
				<el-button type="danger" round @click="cancelBack()"
					>回个人设定</el-button
				>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from "vue";
import Header from "../Header.vue";
import { useRouter } from "vue-router";
import daojishi from '@/components/daojishi/daojishi.vue'

const router = useRouter();
const formInfoRef = ref(null);
const formInfo = reactive({
	account: "",
	password: "",
});

const cancelBack = () => {
	router.push('/user/account');
};

const rules = reactive({
	account: [{ required: true, message: "信箱不可為空", trigger: "blur" }],
	password: [
		{
			required: true,
			message: "密码不能为空",
			trigger: "change",
		},
		{ min: 8, message: "8-16位英数混合，允许特殊符号，区分大小写", trigger: "blur" },
	],
});

const submitForm = async (formEl) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			console.log("submit!");
		} else {
			console.log("error submit!", fields);
		}
	});
};
</script>

<style lang="scss" scoped>
header {
	position: sticky;
	top: 0em;
	padding-left: 1rem;
	padding-right: 1rem;
	width: 100%;
	height: 4rem;
	z-index: 30;
	background: #ffffff;
	display: flex;
	align-items: center;
}

.main {
	width: 100%;
	margin: 0 auto;
	max-width: 32rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 4rem;
	.title {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		h1 {
			font-size: 1.25rem;
			font-weight: 400;
			line-height: 4rem;
			letter-spacing: 0.05em;
			color: #1a202c;
			padding: 1rem;
			height: 4rem;
		}
	}
	.form-box {
		margin-top: 2rem;
		:deep(.el-form-item__label) {
			height: 4rem;
			line-height: 4rem;
			margin-bottom: 0;
			font-size: 1rem;
			font-weight: 400;
			letter-spacing: 0.05em;
			color: #1a202c;
		}
		:deep(.el-input) {
			display: flex;
			width: 100%;
			height: 3.5rem;
		}
		:deep(.el-input__wrapper) {
			background-color: #f7fafc;
		}
	}

	.btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1rem;
		:deep(.el-button) {
			width: 100%;
			max-width: 16rem;
			padding: 0 1rem;
			height: 3rem;
			line-height: 3rem;
			border-radius: 50rem;
			margin: 0;
		}
	}
}
</style>